<template>
  <div>
    <h1>首页</h1>
    <!-- template插槽方式,表单中的输入框组件 -->
    <van-nav-bar class="nav">
      <template #left>
        <van-field
          class="input-el"
          left-icon="search"
          right-icon="scan"
          placeholder="影视 图书 唱片 小组等"
        />
        <img src="../pages/img/03.png" class="img" />
      </template>
      <!-- <template #left>
        <van-field
          class="input-el"
          clearable
          autosize
          center
          placeholder="影视 图书 唱片 小组等"
        />
      </template>
      <template #left-icon>
        <img src="../pages/img/01.png" alt="" />
      </template>
      <template #right-icon>
        <img src="../pages/img/02.png" alt="" />
      </template> -->
    </van-nav-bar>
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>1</van-swipe-item>
      <van-swipe-item>2</van-swipe-item>
      <van-swipe-item>3</van-swipe-item>
      <van-swipe-item>4</van-swipe-item>
    </van-swipe>
    <!--  -->
  </div>
</template>
<script>
export default {};
</script>
<style scoped>
.nav {
  height: 3rem;
  width: 37.5rem;
  display: flex;
  align-items: center;
  background-color: rgb(72, 189, 90);
}
.input-el {
  width: 28rem;
  height: 1.8rem;
  display: flex;
  align-items: center;
  border-radius: 0.3rem;
}

.img {
  margin-left: 1.8rem;
  background-color: rgb(72, 189, 90);
  width: 2rem;
  height: 1.8rem;
}
</style>